<template>
    <Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row>
                <Col span="10">
                    <FormItem label="用户名:">
                        <Input type="text" v-model="form1.userName"></Input>
                    </FormItem>
                </Col>
                <Col span="14">
                    <Button    style="margin-left: 8px" @click="query">查询</Button>
                  <Button @click="reset"  
                          style="margin-left: 8px;background-color:RGB(98,107,125);border-color:RGB(98,107,125)">重置
                  </Button>
                    <Button    style="margin-left: 8px" @click="add">新增</Button>
                </Col>
            </Row>
        </Form>

        <Table class="table" no-data-text="没有查询到相关数据!" max-height="400px"
               highlight-row stripe border :columns="columns1" width="100%" height="450" :data="listData">
        </Table>
        <Page  :total="pagedata.total" :page-size="pagedata.pageSize" :current="pagedata.currentPage" @on-change="pagechange" :page-size-opts="pageSizeArray"
               show-total show-sizer show-elevator />

        <Modal :transfer=false footer-hide v-model="userForSelectModal"  :width=900 :styles="{top: '20px'}">
            <UserForGroupSelect  @getSelectData="getSelectData" :groupId="groupId"   :pageNum1="pageNum1" :totalNum1="totalNum1" :notInListData="notInListData">
            </UserForGroupSelect>
        </Modal>

    </layout>
</template>

<script>
    import {Api} from '../../../api/index.js'
    import UserForGroupSelect from './userForGroupSelect.vue'

    export default {
        props: ['listData','groupId','totalNum'],
        components: {
            UserForGroupSelect
        },
        watch:{
            "totalNum": {
                handler: function (val, oldVal) {
                    this.pagedata.total = val;
                }
            }
        },
        data() {
            return {
                totalNum1 : 0,
                pageNum1:1,
                notInListData : [],
                userForSelectModal : false,
                form1:{
                    userName: ''
                },
                //分页参数
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: this.totalNum,
                    pageSize: 10,
                    currentPage: 1,
                },
                columns1: [{
                  type: 'index',
                  title: '序号',
                    width: 100,
                    align: 'center',
                    fixed: 'left'
                },
                {
                    title: '名称',
                    minWidth: 250,
                    align: 'center',
                    key: 'userName'
                },
                {
                    title: '组织机构',
                    minWidth: 250,
                    align: 'center',
                    key: 'orgName'
                },
                {
                    title: '操作',
                    key: 'action',
                    fixed: 'right',
                    minWidth: 140,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('a', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    fontSize: '12px'
                                },
                                on: {
                                    click: () => {
                                        this.$Modal.confirm({
                                            title: '提示信息',
                                            content: '<p>删除该用户</p>',
                                            okText:'确认',
                                            cancelText:'取消',
                                            onOk: () => {
                                                this.delete(this.listData[params.index].userId);
                                        }});
                                    }     
                                }
                            }, '删除')
                        ]);
                    }
                }],
                dataTable: []
            }
        },
        mounted: function() {
        },
        methods: {
            add(){
                let data = {
                    starPage: 1,
                    size: 10
                }
                data.groupId = this.groupId;
                data = Object.assign(data,JSON.parse(JSON.stringify(this.form1)));
                data.userName = '';
                //console.log(data)
                this.$http.get(Api.userNotInGoupId + this.groupId, {params : data}).then(res => {
                    this.userForSelectModal = true;
                    this.notInListData = res.data.rows;
                    this.totalNum1 = res.data.total;
                    this.pageNum1 = 1;
                    //this.$Message.success('成功!');
                    //this.handleReset()
                }).catch(e => {
                    //this.$Message.error('请求失败');
                })
            },
            delete(id){
                this.$http.delete(Api.userInGroupDelete + this.groupId + "/" + id, {params:{}}).then(res => {
                    this.query()
                    this.$Message.success('成功!');
                    //this.handleReset()
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            getSelectData(){
                this.query();
                this.userForSelectModal = false;
            },
            pagechange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            //查
            query() {
                let data = {
                    starPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize
                }
                data.groupId = this.groupId;
                data = Object.assign(data,JSON.parse(JSON.stringify(this.form1)));
                this.$http.get(Api.userInGroupId +this.groupId, {params : data}).then(res => {
                    this.listData = res.data.rows;
                    this.pagedata.total = res.data.total;
                    //this.$Message.success('成功!');
                    //this.handleReset()
                }).catch(e => {
                    //this.$Message.error('请求失败');
                })
            },
            reset() {
                this.form1 = {
                    userName: ''
                }
            }
        }
    }
</script>
